import React from 'react';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
import { Table, Popconfirm, Button, message } from 'antd';
import BreadCrumb from '@/view/comps/breadcrub/breadcrub';
import './article.less';

export default class Article extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			currentPage: 1,
			article: [],
			tagList: [],
			classify: [],
			completeStatus: [
				{name: '全部', selcted: true, value: ''},
				{name: '已完成', selcted: false, value: '1'},
				{name: '未完成', selcted: false, value: '2'}
			]
		};
		this.classify = '';
		this.tag = '';
		this.isComplete = '';
	}
	componentDidMount() {
		this.getTagList();
		this.getClassify();
		this.getArticleList();
	}
	getTagList = () => {
		AJAX({
			url: '/findTag',
			data: {}
		}).then(res => {
			const obj = {name: '全部', selcted: true};
			const list = res.data || [];
			list.unshift(obj);
			this.setState({ tagList: list });
		}, err => message.error(err.msg));
	}
	getClassify = () => {
		AJAX({
			url: '/findClassify',
			data: {}
		}).then(res => {
			const obj = {name: '全部', selcted: true};
			const list = res.data || [];
			list.unshift(obj);
			this.setState({ classify: list });
		}, err => message.error(err.msg));
	}

	getArticleList = () => {
		console.log('查找文章', this.classify, this.tag, this.isComplete);
		const param = {
			classify: this.classify,
			tag: this.tag,
			status: this.isComplete
		};
		AJAX({
			url: '/findArticleList',
			data: param
		}).then(res => {
			this.setState({ article: res.data });
		}, err => message.error(err.msg));
	}
	deleteArticle = (id) => {
		AJAX({
			url: '/deleteArticle',
			data: {_id: id}
		}).then(res => {
			this.getArticleList();
			message.success('删除成功');
		}, err => message.error(err.msg));
	}

	renderTable = () => {
		const columns = [
			{
				title: '封面',
				align: 'center',
				dataIndex: 'coverImg',
				render: (text, row) => {
					return (
						<div className="table-img">
							<img src={row.coverImg} alt=""/>
						</div>
					);
				}
			}, 
			{
				title: '文章标题',
				align: 'center',
				dataIndex: 'subTitle',
			},
			{
				title: '创建时间',
				align: 'center',
				dataIndex: 'createTime',
			},
			{
				title: '分类',
				align: 'center',
				dataIndex: 'classify',
			}, 
			{
				title: '标签',
				align: 'center',
				dataIndex: 'tag',
			}, 
			{
				title: '状态',
				align: 'center',
				dataIndex: 'status',
			}, 
			{
				title: '操作',
				align: 'center',
				dataIndex: 'operation',
				render: (text, row) => {
				  return (
						<div>
							<Link to={{pathname: '/app/article-detail', search: `?id=${row._id}`}}>查看</Link>
							<Popconfirm 
								title="确定要删除吗?" 
								okText="确定"
								cancelText="取消"
								onConfirm={() => this.deleteArticle(row._id)}
							>
								<span className="blue mr-20 ml-20">删除</span>
							</Popconfirm>
							<Link to={{pathname: '/app/add-article', search: `?id=${row._id}`}}>修改</Link>
						</div>
				  );
				},
			}
		];
		return (
			<Table 
				dataSource={this.state.article}
				columns={columns} 
				bordered
				rowKey="_id"
				pagination={{current: this.state.currentPage, onChange: this.onChangePage, showTotal: total => `总计 ${total} 条`}}
			/>
		);
	}

	render() {
		const { tagList, classify, completeStatus } = this.state;
		return (
			<div>
				<BreadCrumb bread={[{title: 'Dashboard', link: '/'}, {title: '博文管理'}]}/>
				<div className="page-container article-less">
					<div className="filter panel eee mb-20">
						<div className="clearfix pt-5 pb-5">
							<label className="float-l font-700 mr-20">分类</label>
							<div>
								{
									classify.map((item, index) => {
										return (
											<span 
												className={classnames('mr-10', {'active': item.selcted}) } 
												key={index} 
												onClick={() => {
													classify.forEach(item => item.selcted = false);
													classify[index].selcted = true;
													this.classify = item.name === '全部' ? '' : item.name;
													this.setState({classify});
													// this.getArticleList({classify: item.name === "全部" ? '' : item.name});
													this.getArticleList();
												}}>
												{item.name}</span>
										);
									})
								}
							</div>
						</div>
						<div className="clearfix pt-10 pb-10">
							<label className="float-l font-700 mr-20">标签</label>
							<div>
								{
									tagList.map((item, index) => {
										return (
											<span 
												className={classnames('mr-10', {'active': item.selcted}) } 
												key={index} 
												onClick={() => {
													tagList.forEach(item => item.selcted = false);
													tagList[index].selcted = true;
													this.tag = item.name === '全部' ? '' : item.name;
													this.setState({tagList});
													// this.getArticleList({tag: item.name === "全部" ? '' : item.name});
													this.getArticleList();
												}}>
												{item.name}</span>
										);
									})
								}
							</div>
						</div>
						<div className="clearfix pt-10 pb-10">
							<label className="float-l font-700 mr-20">状态</label>
							<div>
								{
									completeStatus.map((item, index) => {
										return (
											<span 
												className={classnames('mr-10', {'active': item.selcted}) } 
												key={index} 
												onClick={() => {
													completeStatus.forEach(item => item.selcted = false);
													completeStatus[index].selcted = true;
													this.isComplete = item.name === '全部' ? '' : item.value;
													this.setState({completeStatus});
													this.getArticleList();
												}}>
												{item.name}</span>
										);
									})
								}
							</div>
						</div>
					</div>
					{this.renderTable()}
				</div>
			</div>
		);
	}

	onChangePage = (page) => {
		this.setState({currentPage: page});
	}
}
